<template>
  <!-- App -->
  <f7-page color-theme="blue">
    <f7-navbar :title="title"> </f7-navbar>

    <f7-toolbar tabbar bottom>
      <f7-link
        icon-f7="chat_bubble_fill"
        text="消息"
        route-tab-id="message"
        @click="selectTab(0)"
      ></f7-link>
      <f7-link route-tab-id="requestinfo" @click="selectTab(1)">
        <f7-icon f7="persons">
          <f7-badge color="red" v-show="myRequestInfosNum">{{
            myRequestInfosNum
          }}</f7-badge>
        </f7-icon>
        <span class="tabbar-label">联系人</span>
      </f7-link>
      <f7-link
        icon-f7="home"
        text="主页"
        route-tab-id="home"
        @click="selectTab(2)"
      ></f7-link>
      <f7-link
        icon-f7="compass"
        text="圈子"
        route-tab-id="compass"
        @click="selectTab(3)"
      ></f7-link>
      <f7-link
        icon-f7="person"
        text="我的"
        route-tab-id="my"
        @click="selectTab(4)"
      ></f7-link>
    </f7-toolbar>

    <f7-tabs routable>
      <f7-tab id="message" @tabShow="tabEvent('消息')"></f7-tab>
      <f7-tab id="requestinfo" @tabShow="tabEvent('好友')"></f7-tab>
      <f7-tab id="home" @tabShow="tabEvent('主页')"></f7-tab>
      <f7-tab id="compass" @tabShow="tabEvent('发现')"></f7-tab>
      <f7-tab id="my" @tabShow="tabEvent('我的')"></f7-tab>
    </f7-tabs>
  </f7-page>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      title: "",
      navbarShow: false,
      myRequestInfosNum: 0,
    };
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.user.isLogin,
      token: (state) => state.user.token,
      myRequestInfos: (state) => state.user.myRequestInfos,
      buddyBy: (state) => state.user.buddyBy,
      refusal: (state) => state.user.refusal,
    }),
  },
  watch: {
    myRequestInfos(myRequestInfos) {
      if (myRequestInfos == undefined) {
        return;
      }
      // 如果有消息,并且未读
      if (myRequestInfos.length > this.myRequestInfosNum) {
        // //  已读操作,避免重复弹窗
        this.myRequestInfosNum++;
        let user = this.myRequestInfos[this.myRequestInfos.length - 1];
        this.$f7.notification
          .create({
            title: "提示",
            subtitle: user.replyAccountName,
            text: "申请添加好友",
            closeTimeout: 3000,
          })
          .open("cache");
      }
    },
  },
  mounted() {
    this.gologin();
  },
  methods: {
    selectTab(index) {
      if (index == 0) {
        this.$f7router.navigate("./message");
      } else if (index == 1) {
        this.$f7router.navigate("./requestinfo");
      } else if (index == 2) {
        this.$f7router.navigate("./");
      } else if (index == 3) {
        this.$f7router.navigate("./compass");
      } else if (index == 4) {
        this.$f7router.navigate("./my");
      }
    },
    tabEvent(title) {
      if (title == "我的") {
        this.$f7.navbar.hide(".navbar");
        this.navbarShow = false;
      } else {
        this.navbarShow = true;
        this.$f7.navbar.show(".navbar");
      }
      this.title = title;
    },
    gologin() {
      if (!this.isLogin) {
        if (this.token) {
          this.$store.dispatch("GetInfo").then((res) => {
            console.log("获取用户信息: ", res);
          });
        } else {
          this.$f7router.navigate("/login");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
